<!-- components/TaskBoard.vue -->
<script setup>
import { useTaskStore } from '@/stores/taskStore'
import TaskCard from './TaskCard.vue'

const store = useTaskStore()

// 拖拽处理函数
const handleDragStart = (task) => {
  event.dataTransfer.setData('taskId', task.id)
}

const handleDrop = (status) => {
  const taskId = Number(event.dataTransfer.getData('taskId'))
  store.updateTaskStatus(taskId, status)
}
</script>

<template>
  <div class="task-board">
    <div 
      v-for="(tasks, status) in store.tasksByStatus" 
      :key="status"
      class="task-column"
      @drop="handleDrop(status)"
      @dragover.prevent
      @dragenter.prevent
    >
      <h3>{{ status.toUpperCase() }}</h3>
      <TaskCard
        v-for="task in tasks"
        :key="task.id"
        :task="task"
        draggable
        @dragstart="handleDragStart(task)"
      />
    </div>
  </div>
</template>

<style scoped>
.task-board {
  display: flex;
  gap: 20px;
}
.task-column {
  flex: 1;
  min-height: 70vh;
  padding: 10px;
  background: #f5f5f5;
  border-radius: 8px;
}
</style>